<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交签到中心</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      min-height: 100vh;
      color: #333;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 导航栏样式 */
    .sign-nav {
      background-color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      color: #333;
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 签到卡片样式 */
    .sign-card {
      background: linear-gradient(135deg, #4361ee, #7209b7);
      border-radius: 16px;
      color: white;
      padding: 20px;
      margin-top: 20px;
      box-shadow: 0 8px 24px rgba(67, 97, 238, 0.25);
      position: relative;
      overflow: hidden;
    }
    
    .sign-card::before {
      content: '';
      position: absolute;
      top: -20%;
      right: -20%;
      width: 120px;
      height: 120px;
      background-color: rgba(255,255,255,0.1);
      border-radius: 50%;
    }
    
    .sign-card::after {
      content: '';
      position: absolute;
      bottom: -10%;
      left: -10%;
      width: 80px;
      height: 80px;
      background-color: rgba(255,255,255,0.1);
      border-radius: 50%;
    }
    
    .sign-streak {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }
    
    .sign-count {
      font-size: 32px;
      font-weight: 700;
      margin: 5px 0;
      position: relative;
      z-index: 1;
    }
    
    .sign-date {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
    }
    
    .sign-btn {
      background-color: white;
      color: #4361ee;
      border: none;
      border-radius: 30px;
      padding: 10px 25px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      position: relative;
      z-index: 1;
    }
    
    .sign-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }
    
    .sign-btn.signed {
      background-color: #e6efff;
      color: #8ea8ff;
      cursor: default;
    }
    
    /* 日历签到样式 */
    .calendar-section {
      background-color: white;
      border-radius: 16px;
      padding: 15px;
      margin-top: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #333;
    }
    
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }
    
    .calendar-day {
      font-size: 12px;
      color: #999;
      text-align: center;
      padding: 5px 0;
    }
    
    .calendar-date {
      aspect-ratio: 1/1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 14px;
      position: relative;
    }
    
    .calendar-date.signed {
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    .calendar-date.today {
      border: 2px solid #4361ee;
      font-weight: 600;
    }
    
    .calendar-date.signed::after {
      content: '';
      position: absolute;
      bottom: 3px;
      width: 4px;
      height: 4px;
      background-color: #1890ff;
      border-radius: 50%;
    }
    
    .calendar-date.disabled {
      color: #ddd;
    }
    
    /* 连续签到奖励样式 */
    .rewards-section {
      background-color: white;
      border-radius: 16px;
      padding: 15px;
      margin-top: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .reward-list {
      display: flex;
      overflow-x: auto;
      padding-bottom: 10px;
      gap: 15px;
    }
    
    .reward-item {
      flex: 0 0 auto;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      border-radius: 12px;
      text-align: center;
    }
    
    .reward-item.achieved {
      background-color: #fff7e6;
      border: 1px solid #ffe8cc;
    }
    
    .reward-item.locked {
      background-color: #f5f5f5;
      border: 1px solid #e8e8e8;
      opacity: 0.7;
    }
    
    .reward-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(67, 97, 238, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: #4361ee;
      font-size: 20px;
    }
    
    .reward-item.locked .reward-icon {
      background-color: #e8e8e8;
      color: #999;
    }
    
    .reward-days {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .reward-item.locked .reward-days {
      color: #999;
    }
    
    .reward-prize {
      font-size: 11px;
      color: #ff7d00;
    }
    
    .reward-item.locked .reward-prize {
      color: #999;
    }
    
    /* 任务签到样式 */
    .tasks-section {
      background-color: white;
      border-radius: 16px;
      padding: 15px;
      margin-top: 15px;
      margin-bottom: 80px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .task-item:last-child {
      border-bottom: none;
    }
    
    .task-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .task-icon {
      width: 36px;
      height: 36px;
      background-color: #f0f7ff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4361ee;
    }
    
    .task-text {
      font-size: 14px;
    }
    
    .task-reward {
      font-size: 12px;
      color: #ff7d00;
      margin-top: 2px;
    }
    
    .task-btn {
      background-color: #f0f7ff;
      color: #4361ee;
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .task-btn.completed {
      background-color: #f6ffed;
      color: #52c41a;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 540px;
      margin: 0 auto;
      background-color: white;
      border-top: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      z-index: 100;
    }
    
    .nav-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      text-decoration: none;
      font-size: 11px;
      gap: 5px;
      flex: 1;
    }
    
    .nav-tab.active {
      color: #4361ee;
    }
    
    .nav-tab i {
      font-size: 20px;
    }
    
    /* 签到成功弹窗 */
    .sign-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .modal-content {
      background-color: white;
      width: 85%;
      max-width: 320px;
      border-radius: 20px;
      padding: 30px 20px;
      text-align: center;
      position: relative;
      transform: translateY(-20px);
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .sign-modal.show .modal-content {
      transform: translateY(0);
      opacity: 1;
    }
    
    .modal-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #4361ee, #7209b7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
      font-size: 36px;
      box-shadow: 0 4px 16px rgba(67, 97, 238, 0.3);
    }
    
    .modal-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .modal-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 25px;
    }
    
    .reward-box {
      background-color: #f0f7ff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 25px;
    }
    
    .reward-amount {
      font-size: 24px;
      font-weight: 700;
      color: #4361ee;
      margin: 5px 0;
    }
    
    .reward-text {
      font-size: 13px;
      color: #666;
    }
    
    .modal-close {
      background-color: #4361ee;
      color: white;
      border: none;
      border-radius: 30px;
      padding: 10px 0;
      width: 100%;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <div class="sign-nav">
    <div class="container nav-container">
      <button class="nav-btn" id="backBtn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="nav-title">每日签到</h1>
      <button class="nav-btn" id="helpBtn">
        <i class="fa fa-question-circle"></i>
      </button>
    </div>
  </div>
  
  <div class="container">
    <!-- 签到卡片 -->
    <div class="sign-card">
      <div class="sign-streak">当前连续签到</div>
      <div class="sign-count">5 天</div>
      <div class="sign-date" id="currentDate">2023年6月15日</div>
      <button class="sign-btn" id="mainSignBtn">今日签到</button>
    </div>
    
    <!-- 日历签到 -->
    <div class="calendar-section">
      <div class="section-title">本月签到记录</div>
      <div class="calendar-grid">
        <div class="calendar-day">一</div>
        <div class="calendar-day">二</div>
        <div class="calendar-day">三</div>
        <div class="calendar-day">四</div>
        <div class="calendar-day">五</div>
        <div class="calendar-day">六</div>
        <div class="calendar-day">日</div>
        
        <!-- 第一周 -->
        <div class="calendar-date disabled">28</div>
        <div class="calendar-date disabled">29</div>
        <div class="calendar-date disabled">30</div>
        <div class="calendar-date disabled">31</div>
        <div class="calendar-date signed">1</div>
        <div class="calendar-date signed">2</div>
        <div class="calendar-date signed">3</div>
        
        <!-- 第二周 -->
        <div class="calendar-date signed">4</div>
        <div class="calendar-date signed">5</div>
        <div class="calendar-date">6</div>
        <div class="calendar-date">7</div>
        <div class="calendar-date">8</div>
        <div class="calendar-date">9</div>
        <div class="calendar-date">10</div>
        
        <!-- 第三周 -->
        <div class="calendar-date">11</div>
        <div class="calendar-date">12</div>
        <div class="calendar-date signed">13</div>
        <div class="calendar-date signed">14</div>
        <div class="calendar-date today">15</div>
        <div class="calendar-date">16</div>
        <div class="calendar-date">17</div>
        
        <!-- 剩余日期 -->
        <div class="calendar-date">18</div>
        <div class="calendar-date">19</div>
        <div class="calendar-date">20</div>
        <div class="calendar-date">21</div>
        <div class="calendar-date">22</div>
        <div class="calendar-date">23</div>
        <div class="calendar-date">24</div>
        
        <div class="calendar-date">25</div>
        <div class="calendar-date">26</div>
        <div class="calendar-date">27</div>
        <div class="calendar-date">28</div>
        <div class="calendar-date">29</div>
        <div class="calendar-date">30</div>
        <div class="calendar-date disabled">1</div>
      </div>
    </div>
    
    <!-- 连续签到奖励 -->
    <div class="rewards-section">
      <div class="section-title">连续签到奖励</div>
      <div class="reward-list">
        <div class="reward-item achieved">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">1天</div>
          <div class="reward-prize">10积分</div>
        </div>
        <div class="reward-item achieved">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">3天</div>
          <div class="reward-prize">30积分</div>
        </div>
        <div class="reward-item achieved">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">5天</div>
          <div class="reward-prize">50积分</div>
        </div>
        <div class="reward-item locked">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">7天</div>
          <div class="reward-prize">80积分</div>
        </div>
        <div class="reward-item locked">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">15天</div>
          <div class="reward-prize">150积分</div>
        </div>
        <div class="reward-item locked">
          <div class="reward-icon">
            <i class="fa fa-gift"></i>
          </div>
          <div class="reward-days">30天</div>
          <div class="reward-prize">350积分</div>
        </div>
      </div>
    </div>
    
    <!-- 任务签到 -->
    <div class="tasks-section">
      <div class="section-title">每日任务</div>
      
      <div class="task-item">
        <div class="task-info">
          <div class="task-icon">
            <i class="fa fa-user-plus"></i>
          </div>
          <div>
            <div class="task-text">关注1位好友</div>
            <div class="task-reward">+20积分</div>
          </div>
        </div>
        <button class="task-btn">去完成</button>
      </div>
      
      <div class="task-item">
        <div class="task-info">
          <div class="task-icon">
            <i class="fa fa-comment"></i>
          </div>
          <div>
            <div class="task-text">发表1条动态</div>
            <div class="task-reward">+30积分</div>
          </div>
        </div>
        <button class="task-btn">去完成</button>
      </div>
      
      <div class="task-item">
        <div class="task-info">
          <div class="task-icon">
            <i class="fa fa-thumbs-up"></i>
          </div>
          <div>
            <div class="task-text">点赞3条动态</div>
            <div class="task-reward">+15积分</div>
          </div>
        </div>
        <button class="task-btn completed">已完成</button>
      </div>
      
      <div class="task-item">
        <div class="task-info">
          <div class="task-icon">
            <i class="fa fa-share-alt"></i>
          </div>
          <div>
            <div class="task-text">分享1条内容</div>
            <div class="task-reward">+25积分</div>
          </div>
        </div>
        <button class="task-btn">去完成</button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-tab">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-tab">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-tab active">
      <i class="fa fa-calendar-check-o"></i>
      <span>签到</span>
    </a>
    <a href="#" class="nav-tab">
      <i class="fa fa-user"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 签到成功弹窗 -->
  <div class="sign-modal" id="signModal">
    <div class="modal-content">
      <div class="modal-icon">
        <i class="fa fa-check"></i>
      </div>
      <div class="modal-title">签到成功</div>
      <div class="modal-desc">恭喜您完成今日签到，获得以下奖励</div>
      <div class="reward-box">
        <div class="reward-text">获得积分</div>
        <div class="reward-amount">20</div>
        <div class="reward-text">连续签到5天，再接再厉！</div>
      </div>
      <button class="modal-close" id="modalClose">确定</button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 元素获取
    const mainSignBtn = document.getElementById('mainSignBtn');
    const signModal = document.getElementById('signModal');
    const modalClose = document.getElementById('modalClose');
    const currentDateEl = document.getElementById('currentDate');
    const taskBtns = document.querySelectorAll('.task-btn:not(.completed)');
    const backBtn = document.getElementById('backBtn');
    const helpBtn = document.getElementById('helpBtn');
    
    // 设置当前日期
    function setCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      currentDateEl.textContent = `${year}年${month}月${day}日`;
      
      // 标记今天的日期
      const todayEls = document.querySelectorAll('.calendar-date.today');
      todayEls.forEach(el => {
        el.textContent = day;
      });
    }
    
    // 初始化日期
    setCurrentDate();
    
    // 主签到按钮点击事件
    mainSignBtn.addEventListener('click', function() {
      if (this.classList.contains('signed')) return;
      
      // 显示签到成功弹窗
      signModal.style.display = 'flex';
      setTimeout(() => {
        signModal.classList.add('show');
      }, 100);
      
      // 更新签到状态
      this.textContent = '已签到';
      this.classList.add('signed');
      
      // 更新日历
      const todayEl = document.querySelector('.calendar-date.today');
      todayEl.classList.add('signed');
    });
    
    // 关闭弹窗
    modalClose.addEventListener('click', function() {
      signModal.classList.remove('show');
      setTimeout(() => {
        signModal.style.display = 'none';
      }, 300);
    });
    
    // 任务按钮点击事件
    taskBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.classList.contains('completed')) return;
        
        this.textContent = '已完成';
        this.classList.add('completed');
        this.classList.remove('task-btn');
        
        // 显示小奖励提示
        showRewardToast('+20积分');
      });
    });
    
    // 显示奖励提示
    function showRewardToast(text) {
      // 创建提示元素
      const toast = document.createElement('div');
      toast.style.position = 'fixed';
      toast.style.bottom = '80px';
      toast.style.right = '20px';
      toast.style.backgroundColor = 'rgba(67, 97, 238, 0.9)';
      toast.style.color = 'white';
      toast.style.padding = '8px 15px';
      toast.style.borderRadius = '20px';
      toast.style.fontSize = '14px';
      toast.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
      toast.style.zIndex = '1000';
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(20px)';
      toast.style.transition = 'all 0.3s ease';
      toast.textContent = text;
      
      document.body.appendChild(toast);
      
      // 显示动画
      setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
      }, 10);
      
      // 隐藏动画
      setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(-20px)';
        
        setTimeout(() => {
          document.body.removeChild(toast);
        }, 300);
      }, 2000);
    }
    
    // 后退按钮
    backBtn.addEventListener('click', function() {
      alert('返回上一页');
    });
    
    // 帮助按钮
    helpBtn.addEventListener('click', function() {
      alert('签到规则：\n1. 每日签到可获得积分\n2. 连续签到天数越多，奖励越丰厚\n3. 完成每日任务可获得额外积分\n4. 积分可在积分商城兑换礼品');
    });
  </script>
</body>
</html>
